var imgs=document.querySelectorAll('.zhong img')
var zimg=document.querySelector('.zuo img')
var zzc=document.querySelector('.zzc')
var you=document.querySelector('.you')
for(i=0;i<imgs.length;i++){
    imgs[i].onmouseover=function(){
        this.style.border='2px solid blue'
        zimg.src=this.src
    }
    imgs[i].onmouseout=function(){
        this.style.border=''
        
    }
}
zimg.onmouseenter=function(){
    zzc.style.display='block'
    you.style.display='block'
}
zimg.onmouseleave=function(){
    zzc.style.display=''
    you.style.display=''
}
zimg.onmousemove=function(e){
    //先让模层显示
    zzc.style.display='block'
    //然后获取坐标 -100是为了让模层在鼠标中心
    var a=e.pageX-100
    var b=e.pageY-100
    //最小值
    a=a<0?0:a
    b=b<0?0:b
    //最大值
    a=a>200?200:a
    b=b>200?200:b
    //将鼠标的坐标赋值给模层
    zzc.style.left=a+'px'
    zzc.style.top=b+'px'
    //将左边的信息赋值给右边放大镜
    you.style.backgroundImage=`url(${this.src})`
    you.style.backgroundPosition=`${-2*a}px ${-2*b}px`
}